<template>
	<view class="root">
		<div class="flex-col self-stretch section_3" style="margin-bottom: 1.2rem;" v-for="(item, index) in posts"
			:key="item.id">

			<view class="userinfo">
				<image mode="aspectFill" :src="item.avatarurl"
					@click="gotoUrl(`/pages/userhome/userhome?id=${item.userId}`)"></image>
				<span class="text_4"
					@click="gotoUrl(`/pages/userhome/userhome?id=${item.userId}`)">{{ item.nickname }}</span>
				<text style="margin-left: auto;">{{ ['沮丧😞','开心😊'][item.mood] }}</text>
			</view>

			<div class="mt-28 flex-col self-stretch" style="margin-top: 0.7rem;">
				<text class="self-start font text_5">{{ item.text }}</text>

				<swiper :indicator-dots="true" style="padding: 0 1rem; margin-top: 1rem; height: 30vh;"
					v-if="item.image != ''">
					<swiper-item v-for="(img) in item.image.split(',')" :key="img">
						<image mode="aspectFill" style="width: 100%; height: 100%;" :src="img" />
					</swiper-item>
				</swiper>
			</div>

			<view class="actions">
				<view class="action-right" v-if="editable"
					@click="gotoUrl(`/pages/community/publish?edit=${JSON.stringify(item)}`)">
					<u-icon size="1.3rem" name="edit-pen"></u-icon>
					<text>编辑</text>
				</view>

				<view class="action-right" v-if="editable" @click="delPost(index)">
					<u-icon size="1.3rem" name="trash"></u-icon>
					<text>删除</text>
				</view>

				<view style="margin-left: auto;" @click="addLike(index)">
					<image style="width: 1.3rem; padding: 0 0.1rem;" v-if="!item.liked"
						src="http://haojiezhe12345.top:8090/miniprogram_static/community/love.png" />
					<uni-icons v-else type="heart-filled" size="1.5rem" color="red"></uni-icons>
					<text>{{ item.thumbs }}</text>
				</view>

				<view @click="commentAddId = item.id">
					<image style="width: 1.2rem; padding: 0 0.1rem;"
						src="http://haojiezhe12345.top:8090/miniprogram_static/community/comments.png" />
					<text>{{ item.commentNumber }}</text>
				</view>
			</view>

			<view class="comments" v-if="item.commentList && item.commentList.length > 0">

				<view v-for="(item1, index1) in item.commentList" :key="index1"
					v-if="item.commentsExpanded || index1 < 3" @click="commentAddId = item.id">
					<text @click.stop="gotoUrl(`/pages/userhome/userhome?id=${item1.userId}`)">
						{{ item1.nickname }}
					</text>
					<text>: {{ item1.commentText }}</text>
				</view>

				<view
					style="color: rgb(64 152 218); font-weight: bold; display: flex; justify-content: center; gap: 0.1rem;"
					v-if="item.commentsExpanded != true && item.commentList.length > 3"
					@click="showCommentsByIndex(index)">
					显示全部
					<uni-icons type="down" size="1rem" color="rgb(64 152 218)"></uni-icons>
				</view>

			</view>

		</div>

		<view class="blank-list-placeholder" v-if="!posts.length">还没有帖子哦~</view>

		<view class="comment-add-overlay" v-if="commentAddId >= 0">
			<view @click="commentAddId = -1" @touchstart="commentAddId = -1"></view>
			<view class="comment-add" :style="{ transform: `translateY(${commentAddTranslateY}px)` }">
				<input placeholder="发送评论…" focus v-model="commentAddText" :adjust-position="false"
					@keyboardheightchange="handleKeyboardHeightChange" />
				<view class="comment-send-btn" @click="addComment"><text>发送</text></view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getCommunityPosts,
		addLike,
		getLikes,
		getPostComments,
		addPostComment,
		delPost,
	} from "@/config/api.js"

	import {
		gotoUrl,
	} from "@/utils.js"

	export default {
		props: {
			type: {
				type: Number,
				default: 0
			},
			editable: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				pageNo: 1,
				pageSize: 10,
				fetchingNextPage: false,

				posts: [{
					"avatarurl": "",
					"commentList": [{
						"avatarurl": "",
						"commentText": "text",
						"commentTime": "",
						"nickname": "name",
						"userId": 0
					}],
					"commentNumber": 0,
					"id": 0,
					"image": "",
					"liked": false,
					"mood": 1,
					"nickname": "test",
					"text": "text",
					"thumbs": 0,
					"title": "",
					"userId": 0,
					"yearsOld": 0,
					commentsExpanded: false
				}],
				posts: [],

				commentAddId: -1,
				commentAddText: "",
				commentAddTranslateY: 0,

				gotoUrl,
			};
		},
		mounted() {
			this.fetchPosts()
		},
		methods: {
			async fetchPosts() {
				this.pageNo = 1
				var res = await getCommunityPosts(this.type, this.pageNo, this.pageSize);
				this.posts = res.records;
			},

			async fetchNextPagePosts() {
				if (this.fetchingNextPage) return
				this.fetchingNextPage = true

				console.log('Fetching page:', this.pageNo + 1)
				var res = await getCommunityPosts(this.type, this.pageNo + 1, this.pageSize);
				if (res && res.records && res.records.length > 0) {
					this.posts = this.posts.concat(res.records)
					this.pageNo++
				}

				setTimeout(() => {
					this.fetchingNextPage = false
				}, 500)
			},

			async showCommentsByIndex(index) {
				var res = await getPostComments(this.posts[index].id)
				this.posts[index].commentList = res
				this.posts[index].commentsExpanded = true
			},

			addLike(index) {
				addLike(this.posts[index].id).then(res => {
					this.posts[index].liked = !this.posts[index].liked
					this.posts[index].liked ? this.posts[index].thumbs++ : this.posts[index].thumbs--
				})
			},

			async delPost(index) {
				uni.showModal({
					content: '删除该帖子吗?',
					success: (res) => {
						if (res.confirm) {
							delPost(this.posts[index].id).then(res => {
								this.posts.splice(index, 1)
								//this.fetchPosts()
								uni.$emit('reloadCommunity')
							})
						}
					}
				});
			},

			handleKeyboardHeightChange(event) {
				let height = event.detail.height
				console.log('keyboard height:', height)
				this.commentAddTranslateY = 0 - height
			},

			async addComment() {
				if (this.commentAddText == '') return

				var id = this.commentAddId
				var txt = this.commentAddText
				this.commentAddId = -1
				this.commentAddText = ""

				var res = await addPostComment(id, txt)

				for (let i = 0; i < this.posts.length; i++) {
					if (this.posts[i].id == id) {
						this.showCommentsByIndex(i)
					}
				}
			},
		},
	};
</script>

<style scoped lang="css">
	@import url("main.css");

	.root {
		display: flex;
		flex-flow: column;
	}

	.userinfo {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.userinfo image {
		width: 2.5em;
		height: 2.5em;
		border-radius: 100rem;
	}

	.actions {
		display: flex;
		align-items: center;
		gap: 1rem;
		height: 2rem;
		margin-top: 1rem;
	}

	.actions image {
		height: 1.2rem;
	}

	.actions text {
		font-size: 1.1rem;
		font-weight: bold;
	}

	.actions>view {
		display: flex;
		align-items: center;
		gap: 0.35rem;
		height: 100%;
	}

	.actions .action-right {
		gap: 0.25rem;
	}

	.actions .action-right text {
		font-size: 1rem;
		font-weight: initial;
	}

	.comments {
		display: flex;
		flex-flow: column;
		margin: 0.5rem 0.5rem 0;
		background-color: rgba(0, 0, 0, 0.07);
		border-radius: 0.7rem;
		padding: 0.1rem;
	}

	.comments>view {
		margin: 0.3rem;
	}

	.comments>view>text {
		word-break: break-all;
	}

	.comments>view>text:first-child {
		font-weight: bold;
		color: rgb(46 111 160);
	}

	.comment-add-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-flow: column;
	}

	.comment-add-overlay>view:first-child {
		flex-grow: 1;
	}

	.comment-add {
		padding: 0.7rem;
		display: flex;
		align-items: center;
		gap: 0.6rem;
		background-color: #f4f4f4;
	}

	.comment-add input {
		flex-grow: 1;
		padding: 0.4rem 0.5rem;
		border: 0.05rem solid #444;
		border-radius: 0.6rem;
		background-color: white;
		font-size: 1.1rem;
		height: 1.5rem;
	}

	.comment-add .comment-send-btn {
		display: flex;
		align-items: center;
		height: 100%;
		padding: 0 0.9rem;
		border-radius: 0.5rem;
		background-color: #ff9692;
		flex-shrink: 0;
	}

	.ml-19 {
		margin-left: 1.19rem;
	}

	.mt-105 {
		margin-top: 6.56rem;
	}

	.mt-19 {
		margin-top: 1.19rem;
	}

	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.header {
		padding: 0.88rem 0.69rem;
		background-color: #ff9692;
		overflow: hidden;
		height: 6.38rem;
	}

	.image {
		width: 2rem;
		height: 2rem;
	}

	.group {
		padding: 0 0.25rem;
	}

	.group_2 {
		margin-left: 5.69rem;
	}

	.image_2 {
		width: 2.25rem;
		height: 2.25rem;
	}

	.text {
		color: #000000;
		font-size: 1.75rem;
		font-family: AlimamaShuHeiTi;
		line-height: 2.04rem;
	}

	.image_3 {
		width: 2rem;
		height: 2rem;
	}

	.group_3 {
		overflow-y: auto;
	}

	.group_4 {
		padding: 1rem;
	}

	.section {
		background-color: #ffffff;
		border-radius: 1.25rem;
		border: solid 0.063rem #000000;
	}

	.equal-division-item {
		position: relative;
		flex: 1 1 0;
	}

	.group_5 {
		padding: 0.75rem 0.69rem;
	}

	.image_4 {
		width: 1.75rem;
		height: 1.81rem;
	}

	.font {
		font-size: 1.2rem;
		font-family: AlimamaShuHeiTi;
		line-height: 1.4rem;
		color: #000000;
	}

	.text_2 {
		margin-right: 0.5rem;
	}

	.section_2 {
		background-color: #4c8a5a1f;
		border-radius: 1.25rem;
	}

	.pos {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.equal-division-item_2 {
		flex-shrink: 0;
	}

	.group_6 {
		padding: 0.75rem 0;
	}

	.image_5 {
		width: 1.81rem;
		height: 1.81rem;
	}

	.text_3 {
		line-height: 1.4rem;
	}

	.section_3 {
		padding: 1.2rem;
		box-shadow: 0rem 0.25rem 0rem #18191f;
		background-color: #ffffff;
		border-radius: 1rem;
		border-left: solid 0.13rem #41434f;
		border-right: solid 0.13rem #41434f;
		border-top: solid 0.13rem #41434f;
		border-bottom: solid 0.13rem #41434f;
	}

	.text_4 {
		color: #41434f;
		font-size: 0.94rem;
		font-family: HarmonyOSSansSC;
		font-weight: 900;
		line-height: 0.9rem;
	}

	.text_5 {
		padding: 0 0.75rem;
		word-wrap: break-word;
		width: 100%;
		box-sizing: border-box;
	}

	.image_6 {
		border-radius: 1.56rem;
		width: 17.13rem;
		height: 9.31rem;
	}

	.image_7 {
		margin-top: 0.88rem;
	}

	.image_8 {
		width: 2.25rem;
		height: 0.5rem;
	}

	.image_9 {
		margin-top: 0.63rem;
	}

	.image_10 {
		margin-top: 0.5rem;
		width: 8.63rem;
		height: 1.13rem;
	}

	.group_7 {
		padding: 0 2.56rem;
	}

	.text_6 {
		margin-left: 0.38rem;
	}
</style>